<%@ page pageEncoding='UTF-8'%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<s:set var="contextPath" value="#request.get('javax.servlet.forward.context_path')" scope="request" />
<!DOCTYPE html>
<head>
    <title>Patient Home</title>
    <%-- header --%>
    <jsp:include page="/WEB-INF/content/common/Header.jsp" flush="true"/>
</head>
<body class="metro">
	<%-- tob-bar --%>
    <jsp:include page="/WEB-INF/content/common/TopBar.jsp" flush="true"/>
       	
	<div id="main-container" class="body-wrapper">
        <%-- tob-container --%>
    	<jsp:include page="/WEB-INF/content/common/TopContainer.jsp" flush="true"/>
        
    	<div id="body-container">
        	<div id="patient-home-container" class="home-container tile-area">
            
            	<div class="tile-group quadro">               
	        		<div class="tile quadro double-vertical no-link">
	        			<img src="${contextPath}/img/tile/bg/patient-care.jpg" style="position: absolute; z-index: 1; opacity: 0.2; height: 100%;">
                		<div class="user-profile-info-container ${guiPatient.male ? 'bg-lightBlue' : 'bg-lightPink'}">
                			<div class="user-profile-image place-left">
                				<s:if test="%{guiPatient.male}">
          							<img class="list-icon bg-lightBlue" src="${contextPath}/img/icon/Man-128.png"/>
         						</s:if>
         						<s:elseif test="%{guiPatient.female}">
          							<img class="list-icon bg-lightPink" src="${contextPath}/img/icon/Woman-128.png"/>
         						</s:elseif>
                			</div>
                			<div class="user-profile-info">
                				<div class="subheader">${guiPatient.name}</div>
                				<div class="subheader">${guiPatient.age} <span class="subheader-secondary">years old</span></div>
                			</div>
                			<div class="user-profile-info-block-container">
	                			<div class="user-profile-info-block place-left">
	                				<label>Gender</label>
	                				<div class="subheader">${guiPatient.gender}</div>
	                			</div>
	                			<div class="user-profile-info-block place-left">
	                				<label>Date of Birth</label>
	                				<div class="subheader">${guiPatient.dobString}</div>
	                			</div>
	                			<div class="user-profile-info-block place-left">
	                				<label>Telephone</label>
	                				<div class="subheader">0718-324-412</div>
	                			</div>
	                			<div class="user-profile-info-block place-left">
	                				<label>Address</label>
	                				<div class="subheader"><small>No.43, Mahara, Kadawatha</small></div>
	                			</div>
                			</div>
                			<br clear="all"/>
                		</div>
                	</div>
                </div>
                
                <div class="tile-group one">
                	<div class="fg-barkBlue">&nbsp;</div>
                	<!-- Time -->
           			<div class="times" data-role="times" data-alarm="hh:mm:ss"></div>
           			
           			<div class="tile bg-darkBlue text-center" style="padding:5px 0;">
           				<span>Treatment Time</span>
           				<div class="header" style="margin:5px 0;"><i class="icon-clock"></i></div>
           				<span class="subheader-secondary fg-white">6:00<span class="item-title-secondary"> ~ </span>9:00</span>
           			</div>
                </div>
            
            	<div class="tile-group four">                      
                    <!-- view next appointment -->
                    <a class="tile double bg-brown live" data-role="live-tile" data-effect="slideUp" data-click="transform">
                    	<!-- first appointment -->                    	                        
                            <div class = "tile-content email appointment">
                                <div class="email-image appointment-patient-gender">
                                    <img src="${contextPath}/img/icon/next-appointment.jpg">
                                </div>
                                <div class="email-data appointment-data">
	                                <s:if test="%{existGuiAppointment}">
		                                    <span class="email-data-title appointment-patient-name">
		                                        Next Appointment
		                                    </span>
		                                    <span class="email-data-subtitle appointment-time">${guiAppointment.date}</span>
		                                    <span class="email-data-text appointment-info">${guiAppointment.time} PM</span>
	                                </s:if>
	                                <s:else>
	                                	<span class="subheader-secondary">No Upcoming Appointments</span>
	                                </s:else>
                                </div>
                            </div>
                    </a>
                            
                    <!-- Health Tips -->                     
                    <a class="tile double bg-darkBlue live" data-role="live-tile" data-effect="slideUp" data-click="transform">
						<!-- first tip --> 
                        <div class = "tile-content email appointment">
                            <div class="email-image appointment-patient-gender">
                                <img src="${contextPath}/img/icon/white/Heart-ECG-128.png">
                            </div>
                        	<div class="email-data appointment-data">
                            	<span class="email-data-title appointment-patient-name">
                                    Health Tip 1
                            	</span>
                            	<span class="email-data-subtitle appointment-time">
                            		Aim to eat the recommended five portions of fruits and vegetables every day.
                            	</span>
                        	</div>
                   		 </div>
                         <!-- Image Tip1 -->
                         <div class = "tile-content email appointment">
                         	<div class="tile-content image">
                         		<img src="${contextPath}/img/tile/bg/Tip1.png">
                         	</div>
                         </div>
                         <!-- second tip --> 
                         <div class = "tile-content email appointment">
                            <div class="email-image appointment-patient-gender">
                                <img src="${contextPath}/img/icon/white/Man-128.png">
                            </div>
                        	<div class="email-data appointment-data">
                            	<span class="email-data-title appointment-patient-name">
                                    Health Tip 2
                            	</span>
                            	<span class="email-data-subtitle appointment-time"> Don't eat too much salt. The recommended daily intake is 5-6g.</span>
                        	</div>
                   		 </div>
                         <!-- Image Tip2 -->
                         <div class = "tile-content email appointment">
                         	<div class="tile-content image">
                         		<img src="${contextPath}/img/tile/bg/Tip2.jpg">
                         	</div>
                         </div>
                         <!-- third tip --> 
                        <div class = "tile-content email appointment">
                            <div class="email-image appointment-patient-gender">
                                <img src="${contextPath}/img/icon/white/Heart-ECG-128.png">
                            </div>
                        	<div class="email-data appointment-data">
                            	<span class="email-data-title appointment-patient-name">
                                    Health Tip 3
                            	</span>
                            	<span class="email-data-subtitle appointment-time">Drink around 1.5 to 2 litres of water, every day. This will ensure the kidneys stay healthy.</span>
                        	</div>
                   		 </div>
                         <!-- Image Tip3 -->
                         <div class = "tile-content email appointment">
                         	<div class="tile-content image">
                         		<img src="${contextPath}/img/tile/bg/Tip3.jpg">
                         	</div>
                         </div>
                         <!-- fouth tip --> 
                        <div class = "tile-content email appointment">
                            <div class="email-image appointment-patient-gender">
                                <img src="${contextPath}/img/icon/white/Heart-ECG-128.png">
                            </div>
                        	<div class="email-data appointment-data">
                            	<span class="email-data-title appointment-patient-name">
                                    Health Tip 4
                            	</span>
                            	<span class="email-data-subtitle appointment-time">Eat plenty of fibre-rich food such as brown bread, pulses and cereals.</span>
                        	</div>
                   		 </div>
                         <!-- Image Tip4 -->
                         <div class = "tile-content email appointment">
                         	<div class="tile-content image">
                         		<img src="${contextPath}/img/tile/bg/Tip4.png">
                         	</div>
                         </div>
                         <!-- fifth tip --> 
                        <div class = "tile-content email appointment">
                            <div class="email-image appointment-patient-gender">
                                <img src="${contextPath}/img/icon/white/Heart-ECG-128.png">
                            </div>
                        	<div class="email-data appointment-data">
                            	<span class="email-data-title appointment-patient-name">
                                    Health Tip 5
                            	</span>
                            	<span class="email-data-subtitle appointment-time">Do not 'go on a diet'. Switch to healthier eating habits.</span>
                        	</div>
                   		 </div>
                         <!-- Image Tip5 -->
                         <div class = "tile-content email appointment">
                         	<div class="tile-content image">
                         		<img src="${contextPath}/img/tile/bg/Tip5.jpg">
                         	</div>
                         </div>
                    </a>         
            	</div> 
                
                <div class="tile-group one">
                	<!-- doctors -->
	        		<a class="tile bg-brown">
	        			<div class="tile-content icon-large">
							<img src="${contextPath}/img/icon/white/Doctor-128.png">
						</div>
						<div class="tile-status">
							<span class="name">Doctors</span>
						</div>
	        		</a>
                </div>

            </div>
    	</div>
        
        <%-- bottom-container --%>
    	<jsp:include page="/WEB-INF/content/common/BottomContainer.jsp" flush="true"/>
        
	</div>
    
    <%-- footer-container --%>
    <jsp:include page="/WEB-INF/content/common/FooterContainer.jsp" flush="true"/>
    
</body>
</html>
